<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{ padding: 0;margin:0; list-style: none; }
		.clearfix:after{ content: ''; clear:both; display:  block; }
		li{ width: 100px; height: 30px; text-align: center; line-height: 30px; border:1px solid red; float: left; }
		p{ width: 300px; height: 300px; background: red; text-align: center;; font-size: 50px; line-height: 300px; display: none; }
		.active{ background: yellow; }
		.show{ display: block; }
	</style>
	<script>
		//声明构造函数
		function tabFn(str){
			this.oPar=document.querySelector(str)
			this.aBtn=this.oPar.querySelectorAll('li')
			this.list=this.oPar.querySelectorAll('p');
			var _this=this;
			for(var i=0; i<this.aBtn.length;i++){
				this.aBtn[i].index=i;
				this.aBtn[i].onclick=function(){
					_this.change(this.index);
				};
			}
		}
		tabFn.prototype.change=function(n){
			for(var i=0; i<this.aBtn.length;i++){
				this.aBtn[i].className='';
				this.list[i].className='';
			}
			this.list[n].className='show';
			this.aBtn[n].className='active';
		}

		

		
	</script>
</head>
<body>
	<div class="tab" id="tab1">
		<ul class="clearfix">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<p class="show">1</p>
		<p>2</p>
		<p>3</p>
	</div>

	<div class="tab" id="tab2">
		<ul class="clearfix">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<p class="show">1</p>
		<p>2</p>
		<p>3</p>
	</div>
	<script>
		var tab1=new tabFn('#tab1');
		var tab2=new tabFn('#tab2');
	</script>
</body>
</html>

